<template>
	<view class="ca-container">
		<view class="list">
			<view class="list-item" v-for="(item,index) in dataList">
				<view class="list-title"><text>{{item.group}}</text></view>
				<view class="list-data" v-for="(sitem,sindex) in item.list" @click="bindClick" :data-pidx="index" :data-idx="sindex" :data-action="sitem.action">
					<view class="ca-txt-ellipsis1">{{sitem.title}}</view>
					<image src="../static/icon/icon_action_more.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{group:'布局',list:[
						{title:'列表',action:'next_page',path:'/pages/layout/message-list'},
						{title:'单页',action:'next_page',path:'/pages/action/layout-page'},
						{title:'空数据页',action:'next_page',path:'/pages/layout/empty-data'},
						{title:'列表详情',action:'next_page',path:'/pages/layout/message-info'},
					]},
					{group:'功能',list:[
						{title:'余额支付',action:'next_page',path:'/pages/action/layout-paypwd'},
					]}
				]
			}
		},
		methods: {
			bindClick(event){
				let _this = this, dataset = event.currentTarget.dataset;
				
				let nav_path = '';
				switch(dataset.action){
					case 'next_page':
					let item = _this.dataList[dataset.pidx].list[dataset.idx];
					nav_path = item.path;
					break;
					default:
					APP._apptool().showToastInfo('该操作标识不存在！');
					break;
				}
				//统一跳转
				if(nav_path.length > 0){
					uni.navigateTo({
						url:nav_path
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.list{
		width: 100%; height:auto;
		display: flex; display: -webkit-flex; flex-direction: column; align-items: center;
		.list-item{
			width: 100%; height: auto;
			display: flex; display: -webkit-flex; flex-direction: column; align-items: center;
			background-color: #FFFFFF; border-radius:20rpx;
			.list-title{
				width: 100%; padding: 30rpx 0rpx;
				font-size: 30rpx; color: #000000; font-weight: bolder; background-color: #EFEFEF;
				text{
					margin-left: 20rpx;
				}
			}
			.list-data{
				width: 95%; height: auto; padding: 20rpx 0rpx;
				display: flex; display: -webkit-flex; flex-direction: row; align-items: center; justify-content: space-between;
				border-bottom: 1rpx solid #DDDDDD;
				view{
					flex: 1;
				}
				image{
					width: 40rpx; height: 40rpx;
				}
			}
			.list-data:active{
				background-color: #EFEFEF;
			}
		}
	}
</style>
